<template>
  <a-modal
    v-model:visible="modelVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    fullscreen
    unmount-on-close
  >
    <template #title> 合同模板 </template>
    <div class="template-steps">
      <a-steps changeable :current="current" @change="setCurrent">
        <a-step>基本信息</a-step>
        <a-step>合同文本</a-step>
        <a-step>页眉设置</a-step>
        <!-- <a-step>归档设置</a-step> -->
      </a-steps>
    </div>
    <!-- 基础信息 -->
    <div v-show="current === 1">
      <ContractBaseInfo
        ref="baseInfoRef"
        :data="templateData.data.baseInfoData"
      />
    </div>

    <!-- 合同文本 -->
    <div v-show="current === 2">
      <ContractDesign ref="designRef" :data="templateData.data.designData" />
    </div>
    <!-- 页眉设置 -->
    <div v-show="current === 3">
      <!-- <AssessmentIndex v-model:data="templateData" /> -->
      <ContractPageHeaderSetting
        ref="pageHeaderSettingRef"
        :data="templateData.data.pageHeaderSettingData"
      />
    </div>
    <!-- 归档设置 -->
    <!-- <div v-show="current === 4">
      <ContractFileSetting
        ref="fileSettingRef"
        :data="templateData.data.fileSettingData"
      />
    </div> -->
    <template #footer>
      <div class="modal-footer">
        <a-space size="large" align="center">
          <a-button type="secondary" :disabled="current <= 1" @click="onPrev">
            <IconLeft />
            上一步
          </a-button>
          <a-button
            type="primary"
            v-show="current !== 3"
            :disabled="current >= 3"
            @click="onNext"
          >
            下一步
            <IconRight />
          </a-button>
          <a-button type="primary" v-show="current === 3" @click="save">
            保存
          </a-button>
        </a-space>
      </div>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { cloneDeep } from 'lodash';
import { PerformanceAppraisal } from '@/apis/management/performance/baseSetting/template/type';
import ContractBaseInfo from './ContractBaseInfo.vue';
import ContractDesign from './ContractDesign.vue';
import ContractPageHeaderSetting from './ContractPageHeaderSetting.vue';
import ContractFileSetting from './ContractFileSetting.vue';
import {
  AddContractTemplate,
  PutContractTemplate
} from '@/apis/management/contract/baseSetting';
const props = withDefaults(
  defineProps<{
    visible?: boolean;
    data: any;
  }>(),
  {
    visible: false
  }
);
const emit = defineEmits(['update:visible', 'update:data', 'handleOk', 'save']);
const route = useRoute();
const id = +route.query.typeId;

let baseInfoRef = ref();
let designRef = ref();
let pageHeaderSettingRef = ref();
let fileSettingRef = ref();
const templateData = reactive({
  data: {
    baseInfoData: {
      name: '',
      enable: 1,
      remark: ''
    },
    designData: {
      text: '',
      codes: []
    },
    pageHeaderSettingData: {
      style: 1,
      enterpriseName: '',
      logo: ''
    },
    fileSettingData: {}
  }
});

const orginData = cloneDeep(templateData);

const handleCancel = () => {
  emit('update:visible', false);
};
const handleOk = () => {
  emit('handleOk');
  handleCancel();
};
const modelVisible = ref(false);
const current = ref(1);
const reset = () => {
  current.value = 1;
};
watch(
  () => props.visible,
  (val) => {
    modelVisible.value = val;
  },
  { deep: true }
);

watch(
  () => props.data,
  (newVal: any) => {
    if (newVal?.id || newVal?.isCopyEdit) {
      for (let i in templateData.data.baseInfoData) {
        templateData.data.baseInfoData[i] = newVal[i];
      }
      for (let i in templateData.data.designData) {
        if (i === 'codes' && typeof newVal[i] === 'string') {
          templateData.data.designData[i] = newVal[i].split(',');
        } else templateData.data.designData[i] = newVal[i];
      }
      for (let i in templateData.data.pageHeaderSettingData) {
        templateData.data.pageHeaderSettingData[i] = newVal[i];
      }
      for (let i in templateData.data.fileSettingData) {
        templateData.data.fileSettingData[i] = newVal[i];
      }
      console.log('====================================1111');
      console.log(newVal);
      console.log(templateData.data);
      console.log('====================================');
    } else {
      templateData.data = cloneDeep(orginData.data);
      console.log('====================================2222');
      console.log(newVal);
      console.log(templateData.data);
      console.log('====================================');
    }
  }
);
const onPrev = () => {
  current.value = Math.max(1, current.value - 1);
};
const onNext = async () => {
  if (current.value === 1) {
    const checkTab1 = await baseInfoRef.value.validate();
    if (checkTab1) return;
  } else if (current.value === 3) {
    const checkTab3 = await pageHeaderSettingRef.value.validate();
    if (checkTab3) return;
  }

  current.value = Math.min(4, current.value + 1);
};
const setCurrent = async (n: number) => {
  if (current.value === 1) {
    const checkTab1 = await baseInfoRef.value.validate();
    if (checkTab1) return;
  } else if (current.value === 3 && n >= 3) {
    const checkTab3 = await pageHeaderSettingRef.value.validate();
    if (checkTab3) return;
  }
  current.value = n;
};
const save = async () => {
  const checkTab3 = await pageHeaderSettingRef.value.validate();
  if (checkTab3) return;
  let codes = [];
  designRef.value.formData.codes.forEach((el: any) => {
    if (el !== '') codes.push(el);
  });
  codes = codes.join(',');
  const data = {
    typeId: id,
    ...baseInfoRef.value.formData,
    ...designRef.value.formData,
    codes,
    ...pageHeaderSettingRef.value.formData
  };
  console.log('====================================dataatata');
  console.log(data);
  console.log('====================================');
  if (props.data?.id)
    await PutContractTemplate({
      ...data,
      id: props.data.id
    });
  else await AddContractTemplate(data);
  emit('update:visible', false);
  emit('save');
};
</script>

<style lang="less" scoped>
.template-steps {
  padding: 0 160px;
  margin-bottom: 60px;
}
.modal-footer {
  display: flex;
  justify-content: center;
}
</style>
